<template>
  <div class="app">
    <h3>App组件，{{ car.name }}: {{ car.price }}</h3>
  </div>
</template>

<script>

import {isProxy, isReactive, isReadonly, isRef, provide, reactive, readonly, ref} from "vue";

export default {
  name: "App",
  components: {},
  setup(props, context) {
    let car = reactive({
      name: '奔驰',
      price: '40W'
    });
    let car2 = readonly(car);
    let sum = ref(0);

    console.log(isRef(sum));
    console.log(isReactive(car));
    console.log(isReadonly(car2));
    console.log(isProxy(car));
    console.log(isProxy(car2));
    return {
      car,
      sum,
      car2
    }
  }
}
</script>

<style scoped>
.app {
  background-color: gray;
  padding: 10px;
}
</style>